<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入小区或者地址"
      show-action
      background="transparent"
    >
      <template #label>
        <router-link to="/area"
          ><span style="color: #000">{{ city.label }}</span
          ><van-icon name="arrow-down"
        /></router-link>
      </template>
      <template #action
        ><van-icon name="location" size="20px" color="#fff"
      /></template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item title="区域">
        <van-picker :columns="columns">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="方式">
        <van-picker :columns="columns1">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="租金">
        <van-picker :columns="columns2">
          <template #columns-bottom>
            <van-row>
              <van-col span="8"
                ><van-button type="default" style="width: 100%"
                  >取消</van-button
                ></van-col
              >
              <van-col span="16"
                ><van-button type="primary" style="width: 100%"
                  >确认</van-button
                ></van-col
              >
            </van-row>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="show = true"></van-dropdown-item>
    </van-dropdown-menu>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    />
    <div class="box">
      <div
        class="house"
        v-for="(item, index) in cityhouse"
        :key="index"
        @click="$router.push(`HousingDetails/${item.houseCode}`)"
      >
        <div class="pic">
          <van-image
            width="100%"
            height="100%"
            :src="'http://liufusong.top:8080' + item.houseImg"
          />
        </div>
        <div class="text">
          <h4 class="sin-line">{{ item.title }}</h4>
          <p>{{ item.desc }}</p>
          <span v-for="(item1, index) in item.tags" :key="index">{{
            item1
          }}</span>
          <br />
          <b>{{ item.price }}元/月</b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcityhouse } from '@/api/find'
export default {
  name: 'look-page',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      city: JSON.parse(localStorage.getItem('city')) || {
        label: '北京',
        value: 'AREA|88cff55c-aaa4-e2e0',
        pinyin: 'beijing',
        short: 'bj'
      },
      show: false,
      cityhouse: [],
      columns: [
        {
          text: '浙江',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
            }
          ]
        },
        {
          text: '福建',
          children: [
            {
              text: '福州',
              children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门',
              children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ],
      columns1: ['不限', '整租', '合租'],
      columns2: [
        '1000一下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '7000以上'
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getcityhouse({ cityId: this.city.value })
    // console.log(res)
    this.cityhouse = res.body.list
    console.log(res.body.list)
  },
  methods: {
    // showPopup() {
    //   this.show = !this.show
    // }
    // house(code) {
    //   this.$router.push('/housingdetails')
    //   localStorage.setItem('houseCode', code)
    // }
    // fn(houseCode) {
    //   this.$router.push({
    //     path: '/housingdetails/:id',
    //     name: 'HousingDetails',
    //     params: { id: houseCode }
    //   })
    // }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-search {
  background-color: #41c38d !important;
}
::v-deep .van-popup {
  z-index: 9999;
}
.box {
  width: 100%;
  padding: 10px;
  .house {
    height: 120px;
    width: 100%;
    // background-color: red;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pic {
      width: 106px;
      height: 80px;
      // background-color: red;
    }
    .text {
      // background-color: blue;
      width: 227px;
      height: 89px;
      color: #000;
      padding: 5px 0 0 10px;

      p {
        color: #ccc;
        font-size: 12px;
      }
      span {
        display: inline-block;
        padding: 2px 4px;
        background-color: #41c38d;
        color: #9fdfe7;
        font-size: 12px;
        border-radius: 4px;
        margin-right: 2px;
      }
      b {
        color: red;
      }
    }
  }
}
</style>
